* {
  padding: 0px;
  margin: 0px;
}
html,
body {
  height: 100%;
  width: 100%;
}
.htrd-l-clear {
  clear: both;
}
.htrd-l-fl {
  float: left;
}
.htrd-l-fr {
  float: right;
}
.htrd-l-right {
  float: left;
}
.htrd-l-icon {
  width: 20px;
  height: 20px;
  margin-top: -18px;
  margin-right: -5px;
  cursor: pointer;
}
.htrd-l-panel-enlarge {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.htrd-l-panel-enlarge .header {
  height: 40px;
}
.htrd-l-panel-enlarge .header .title {
  float: left;
  margin: 0px 20px;
}
.htrd-l-panel-enlarge .header .close-panel {
  cursor: pointer;
  float: right;
  width: 20px;
  height: 20px;
  margin: 15px 20px;
  color: #333;
  margin-bottom: 0px;
}
.htrd-l-panel-enlarge .content {
  padding: 10px 20px;
}
.follow-list {
  height: 450px;
  overflow: auto;
}
.htrd-c-chart .chart-date-filter {
  float: left;
  height: 30px;
  display: none;
}
.htrd-c-chart .chart-date-filter .title {
  margin-right: 10px;
}
.htrd-c-chart .chart-date-filter .label {
  margin-right: 6px;
  cursor: pointer;
  margin-bottom: 6px;
  display: inline-block;
  height: 18px;
}
.htrd-c-chart .chart-group-filter {
  float: right;
  margin-bottom: 40px;
}
.htrd-c-chart .date {
  float: right;
}
.htrd-c-chart .chart-title {
  font-size: 20px;
  line-height: 40px;
  height: 40px;
  text-align: center;
  margin: 10px auto;
}
.htrd-c-chart .chart {
  height: 450px;
  width: 100%;
}
.htrd-c-chart .mini-chart {
  height: 300px;
  width: 100%;
}
.filter-text {
  float: left;
  height: 30px;
  line-height: 30px;
  margin: 0px 10px;
}
.chart-date-filter {
  float: left;
  height: 30px;
  display: none;
}
.chart-date-filter .title {
  margin-right: 10px;
}
.chart-date-filter .label {
  margin-right: 6px;
  cursor: pointer;
  margin-bottom: 6px;
  display: inline-block;
  height: 18px;
}
.chart-group-filter {
  float: right;
  margin-bottom: 0px;
}
.test {
  color: #ffffff;
}
.js-warn-list {
  margin: 15px;
  margin-top: 0px;
}
.js-warn-list .js-warn-list-title {
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #eee;
}
.js-warn-list .js-warn-list-title .js-warn-list-right {
  float: right;
  margin-top: -4px;
}
.js-warn-list .js-warn-list-title .js-warn-list-right .js-warn-list-select {
  display: inline-block;
}
.js-warn-list .js-warn-list-title .js-warn-list-right .js-warn-list-select ul {
  min-width: 150px;
  max-height: 100px;
  overflow: auto;
  padding: 10px;
}
.js-warn-list .js-warn-list-title .js-warn-list-right .js-warn-list-select ul li:hover {
  background-color: #eee;
  cursor: pointer;
}
.js-warn-list .js-warn-list-table {
  margin-top: 20px;
}
.js-list-red {
  color: #d9534f;
}
.js-list-orange {
  color: #FF7F00;
}
.js-list-golden {
  color: #f0ad4e;
}
.js-list-yellow {
  color: #ec971f;
}
.table-list thead tr {
  font-size: 14px;
}
.table-list tbody tr {
  font-size: 14px;
}
.table-list tbody tr .js-list-td {
  text-align: center;
}
table {
  border-left: none;
  border-right: none;
  width: initial;
  margin: 0px;
}
table th {
  margin: 8px;
  font-size: 12px;
  text-align: center;
  background-color: #f6f6f6;
}
table td {
  font-size: 12px;
  text-align: center;
  padding: 0px 8px;
  height: 36px;
  line-height: 36px;
}
table td input[type=checkbox] {
  margin: 12px 0px;
}
table td .text-0 {
  width: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
table td .text-1 {
  width: 130px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
table td .text-2 {
  width: 122px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
table td .text-3 {
  width: 138px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
table td .text-4 {
  width: 106px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
table td .text-5 {
  width: 85px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
table td .text-6 {
  width: 106px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}
table .td-1 {
  width: 72px;
}
table .td-2 {
  width: 138px;
}
table .td-3 {
  width: 154px;
}
table .td-4 {
  width: 140px;
}
.htrd-c-host-map {
  width: 351px;
  height: 366px;
  margin: 0px auto;
  background-image: url('../img/hostMap.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
.htrd-c-chart-notice-list {
  float: left;
  overflow: auto;
  height: 100%;
}
.htrd-c-chart-notice-list.mini {
  height: 180px;
}
.htrd-c-chart-info {
  width: 546px;
  margin: 36px auto;
}
.htrd-c-chart-info.show {
  height: 300px;
}
.js-concern-list {
  margin: 20px;
}
.js-concern-list .js-concern-list-title {
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  background-color: #eee;
  padding: 10px;
}
.js-concern-list .js-concern-list-title .js-concern-btn {
  float: right;
  margin-top: -4px;
}
.js-concern-list .js-concern-list-title .js-concern-btn .js-concern-btn-add {
  margin-right: 10px;
  padding: 3px 12px;
}
.js-concern-list .js-concern-list-title .js-concern-btn .js-concern-btn-del {
  margin-right: 30px;
  padding: 3px 12px;
}
.js-concern-list .js-concern-list-concent {
  margin-top: 20px;
}
.js-concern-list .js-concern-list-concent table {
  font-size: 14px;
}
.js-concern-list .js-concern-list-concent table thead {
  background-color: #eee;
}
.js-concern-list-checkbox {
  position: relative;
}
.js-concern-list-checkbox input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.js-concern-list-checkbox span {
  cursor: pointer;
  position: absolute;
  top: 8px;
  left: 15px;
  height: 18px;
  width: 18px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color: #fff;
}
.js-concern-list-checkbox .js-concern-list-img {
  background: url(../img/sprite.png) no-repeat -61px -992px;
}
.ht-c-panel-group {
  width: 1172px;
  margin: 15px auto;
}
.ht-c-panel-group .ht-c-panel {
  width: 578px;
  height: 432px;
  border-radius: 0px;
  margin-right: 15px;
  margin-bottom: 15px;
}
.ht-c-panel-group .ht-c-panel .ht-c-panel-header {
  width: 100%;
  height: 48px;
  background-color: #ffffff;
  line-height: 48px;
}
.ht-c-panel-group .ht-c-panel .ht-c-panel-header .chart-group-filter {
  height: 48px;
  line-height: 48px;
  float: right;
}
.ht-c-panel-group .ht-c-panel .ht-c-panel-header .chart-group-filter .ht-c-filter {
  height: 30px;
  margin: 9px 0px;
}
.ht-c-panel-group .ht-c-panel .ht-c-panel-header .ht-c-title {
  color: #000000;
  font-weight: 900;
  height: 48px;
  float: left;
  margin-left: 15px;
}
.ht-c-panel-group .ht-c-panel .ht-c-panel-header .ht-c-icon {
  float: right;
  width: 16px;
  height: 16px;
  margin: 15px;
}
.ht-c-panel-group .ht-c-panel .ht-c-panel-header .ht-c-icon.ht-c-icon-max {
  background-image: url('../img/max.png');
}
.ht-c-panel-group .ht-c-panel .ht-c-panel-header .ht-c-icon.ht-c-icon-min {
  background-image: url('../img/min.png');
}
.ht-c-panel-group .ht-c-panel .ht-c-panel-content {
  width: 100%;
  height: 384px;
}
.ht-c-panel-group .ht-c-panel.ht-c-panel-large {
  height: 765px;
  margin-right: 0px;
  margin-bottom: 0px;
}
.ht-c-panel-group .ht-c-panel.ht-c-panel-large .ht-c-panel-header {
  width: 100%;
  height: 48px;
}
.ht-c-panel-group .ht-c-panel.ht-c-panel-large .ht-c-panel-content {
  width: 100%;
  height: 718px;
}
.ht-c-panel-group .ht-c-panel.ht-c-panel-close {
  height: 432px;
  margin-right: 0px;
  margin-bottom: 0px;
}
.ht-c-panel-group .ht-c-panel.ht-c-panel-close .ht-c-panel-header {
  width: 100%;
  height: 48px;
}
.ht-c-panel-group .ht-c-panel.ht-c-panel-close .ht-c-panel-content {
  width: 100%;
  height: 384px;
}
.ht-c-panel-group .ht-c-panel.ht-c-panel-small {
  height: 318px;
  margin-bottom: 0px;
}
.ht-c-panel-group .ht-c-panel.ht-c-panel-small .ht-c-panel-content {
  width: 100%;
  height: 270px;
}
.ht-c-panel-group .ht-c-panel.ht-c-panel-small .ht-c-panel-content .follow-list {
  height: 270px;
}
.ht-c-list {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.ht-c-btn {
  font-size: 12px;
  width: 44px;
  height: 24px;
  line-height: 24px;
  margin: 6px 8px;
  text-align: center;
  padding: 0px;
  border-radius: 2px;
  border: none;
}
.ht-c-title {
  color: #000000;
  font-weight: 900;
  height: 48px;
  line-height: 48px;
  float: left;
  margin-left: 15px;
}
.ht-c-icon {
  float: right;
  width: 16px;
  height: 16px;
  margin: 15px;
}
.ht-c-icon.ht-c-icon-max {
  background-image: url('../img/max.png');
}
.ht-c-icon.ht-c-icon-min {
  background-image: url('../img/min.png');
}
.ht-c-header {
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.ht-c-content {
  width: 100%;
}
.screenList {
  margin-top: 15px;
}
